window.addEventListener('load', function() {
  var log = console.log || window.console.log;
  var $ = document.querySelector.bind(document);

  var _ul = $('ul');
  animation(_ul, 83.33);
  
  /**上滚动函数
   * obj是上滚动的dom
   * roll_len是在1080屏幕下，单次移动的px距离，不带单位
   */
  function animation(obj, roll_len) {
    roll_len = roll_len * document.body.clientWidth / 1080;
    var times = 0;
    var _cl = obj.children.length -1;

    function animate(start, end, cb) { 
      function getAttr(obj) {
        return parseFloat(window.getComputedStyle(obj).top);
      }
      var _dif = getAttr(obj) - start;
      start = start == getAttr(obj) ? start : getAttr(obj);
      end = end + _dif;
      var step = (end - start) / 10;
      var n = 1;
      clearInterval(timer)
      function move() {
        obj.style.top = start + step * n + 'px';
        if(step >= 0) {
          if(obj.offsetTop >= parseInt(end)) { 
            obj.style.top = Math.abs(end) <= 1 ? 0 : end.toFixed(4) + 'px';
            clearInterval(timer);
            cb && cb();
          }
        } else if(step <= 0) {
          if(obj.offsetTop <= parseInt(end)) {
            obj.style.top = Math.abs(end) <= 1 ? 0 : end.toFixed(4) + 'px';
            clearInterval(timer);
            cb && cb();
          }
        }
        n++;
      }
      var timer = setInterval(move, 30);
    }

    var timerUl = setInterval(function() {
      if(obj.offsetTop <= parseInt(- _cl * roll_len)) {
        obj.style.top = 0;
        times = 1;
      } else {
        times++;
      }
      animate(roll_len - times * roll_len, -times * roll_len)
    }, 1500)
    document.addEventListener('visibilitychange', function() {
      var isHidden = document.hidden;
      if(isHidden) {
        clearInterval(timerUl);
      } else {
        timerUl = setInterval(function() {
          if(obj.offsetTop <= parseInt(- _cl * roll_len)) {
            obj.style.top = 0;
            times = 1;
          } else {
            times++;
          }
          animate(roll_len - times * roll_len, -times * roll_len);
        }, 1500)
      }
    })
  }
})